<!-- 当前导航 -->
<div class="current-position">
  <!-- 面包屑 -->
  <nz-breadcrumb class="breadcrumb">
    <nz-breadcrumb-item>首页</nz-breadcrumb-item>
    <nz-breadcrumb-item>用户管理</nz-breadcrumb-item>
    <nz-breadcrumb-item>用户注册</nz-breadcrumb-item>
  </nz-breadcrumb>
  <h1 class="current-position-title">用户注册</h1>
  <h1 class="current-position-desc">注册用户</h1>
  <div class="steps">
    <nz-steps [(nzCurrent)]="_currentStep">
      <nz-step [nzTitle]="'用户注册'" [nzDescription]="'填写用户资料.'"></nz-step>
      <nz-step [nzTitle]="'app授权'" [nzDescription]="'授权分配.'"></nz-step>
    </nz-steps>
  </div>
</div>
<!-- 主体内容 -->
<div class="main-content">
  <form nz-form [formGroup]="_registeUserForm" (ngSubmit)="_submitForm()">
    <!-- 用户名 -->
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
        <label for="username" nz-form-item-required>用户名</label>
      </div>
      <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
        <nz-input [nzSize]="'large'" formControlName="username" [nzId]="'username'"></nz-input>
        <div nz-form-explain *ngIf="getFormControl('username').dirty&&getFormControl('username').hasError('required')">请填写用户名!</div>
      </div>
    </div>
    <!-- 密码 -->
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
        <label for="password" nz-form-item-required>密码</label>
      </div>
      <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
        <nz-input [nzSize]="'large'" formControlName="password" [nzId]="'password'"></nz-input>
        <div nz-form-explain *ngIf="getFormControl('password').dirty&&getFormControl('password').hasError('required')">请填写密码!</div>
      </div>
    </div>
    <!-- 确认密码 -->
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
        <label for="repeatPassword" nz-form-item-required>确认密码</label>
      </div>
      <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
        <nz-input [nzSize]="'large'" formControlName="repeatPassword" [nzId]="'repeatPassword'"></nz-input>
        <div nz-form-explain *ngIf="getFormControl('repeatPassword').dirty&&getFormControl('repeatPassword').hasError('required')">请填重复密码!</div>
        <div nz-form-explain *ngIf="getFormControl('repeatPassword').dirty&&getFormControl('repeatPassword').hasError('repeat')&&!getFormControl('repeatPassword').hasError('required')">与密码不一致!</div>
      </div>
    </div>
    <!-- 角色 -->
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
        <label for="username" nz-form-item-required>角色</label>
      </div>
      <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
        <nz-select formControlName="role" [nzSize]="'large'" [nzPlaceHolder]="'请选择角色'">
          <nz-option [nzLabel]="item.RoleName" [nzValue]="item.RoleId" *ngFor="let item of _roleLs"></nz-option>
        </nz-select>
        <div nz-form-explain *ngIf="getFormControl('role').dirty&&getFormControl('role').hasError('required')">请选择角色!</div>
      </div>
    </div>
    <!-- 提交注册 -->
    <div nz-form-item nz-row style="margin-bottom:8px;">
      <div nz-form-control nz-col [nzSpan]="14" [nzOffset]="6">
        <button nz-button [nzSize]="'large'" [nzType]="'primary'">注册</button>
      </div>
    </div>
  </form>
</div>